GitHub

• 丟上 Render

我要學50音

• 實作後的成果
• 隨著每天的更新都會變化唷唷～～

katakanaList

export const katakanaList = [
  {
    name: "ア",
    roots: "a",
    あ: "ア",
    い: "イ",
    う: "ウ",
    え: "エ",
    お: "オ",
    words: ["ア", "イ", "ウ", "エ", "オ", ""],
  },
  {
    name: "カ",
    roots: "k",
    あ: "カ",
    い: "キ",
    う: "ク",
    え: "ケ",
    お: "コ",
    words: ["カ", "キ", "ク", "ケ", "コ", ""],
  },
  {
    name: "サ",
    roots: "s",
    あ: "サ",
    い: "シ",
    う: "ス",
    え: "セ",
    お: "ソ",
    words: ["サ", "シ", "ス", "セ", "ソ", ""],
  },
  {
    name: "タ",
    roots: "t",
    あ: "タ",
    い: "チ",
    う: "ツ",
    え: "テ",
    お: "ト",
    words: ["タ", "チ", "ツ", "テ", "ト", ""],
  },
  {
    name: "ナ",
    roots: "n",
    あ: "ナ",
    い: "ニ",
    う: "ヌ",
    え: "ネ",
    お: "ノ",
    words: ["ナ", "ニ", "ヌ", "ネ", "ノ", ""],
  },
  {
    name: "ハ",
    roots: "h",
    あ: "ハ",
    い: "ヒ",
    う: "フ",
    え: "ヘ",
    お: "ホ",
    words: ["ハ", "ヒ", "フ", "ヘ", "ホ", ""],
  },
  {
    name: "マ",
    roots: "m",
    あ: "マ",
    い: "ミ",
    う: "ム",
    え: "メ",
    お: "モ",
    words: ["マ", "ミ", "ム", "メ", "モ", ""],
  },
  {
    name: "ヤ",
    roots: "y",
    あ: "ヤ",
    い: " ",
    う: "ユ",
    え: " ",
    お: "ヨ",
    words: ["ヤ", " ", "ユ", " ", "ヨ", ""],
  },
  {
    name: "ラ",
    roots: "r",
    あ: "ラ",
    い: "リ",
    う: "ル",
    え: "レ",
    お: "ロ",
    words: ["ラ", "リ", "ル", "レ", "ロ", ""],
  },
  {
    name: "ワ",
    roots: "w",
    あ: "ワ",
    い: " ",
    う: " ",
    え: " ",
    お: "ヲ",
    words: ["ワ", " ", " ", " ", "ヲ", ""],
  },
  {
    name: "ン",
    roots: "n",
    あ: "",
    い: " ",
    う: " ",
    え: " ",
    お: " ",
    words: [" ", " ", " ", " ", " ", "ン"],
  },
];

Day11.js

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box, Grid } from "@mui/material";
import { katakanaList } from "../../shared/model/aiueoObj";

//
// IMPORT ZONE
//

const Day11 = () => {
  const katakanaRow = [...katakanaList].map((d, idx) =>
    Object.assign(d, { id: idx })
  );
  const katakanaColumns = [
    {
      field: "name",
      headerName: "行",
      width: 50,
    },
    {
      field: "あ",
      headerName: "あ段",
      width: 50,
    },
    {
      field: "い",
      headerName: "い段",
      width: 50,
    },
    {
      field: "う",
      headerName: "う段",
      width: 50,
    },
    {
      field: "え",
      headerName: "え段",
      width: 50,
    },
    {
      field: "お",
      headerName: "お段",
      width: 50,
    },
  ];

  console.log(katakanaRow);

  return (
    <Grid container direction={"column"} alignContent={"center"}>
      <Box>
        <DataGrid columns={katakanaColumns} rows={katakanaRow} />
      </Box>
    </Grid>
  );
};

export default Day11;

Reference

• Material UI